"use client"

import { useState, useEffect } from "react"
import { CategoryFilter } from "@/components/filters/category-filter"
import {getRegionsAndLanguages} from "@/lib/api-client";


interface RegionLanguageFilterProps {
    selectedRegionId: number | null
    selectedLanguageId: number | null
    onRegionChange: (regionId: string | number | null) => void
    onLanguageChange: (languageId: string | number | null) => void
    className?: string
}

export function RegionLanguageFilter({
                                         selectedRegionId,
                                         selectedLanguageId,
                                         onRegionChange,
                                         onLanguageChange,
                                         className,
                                     }: RegionLanguageFilterProps) {
    const [regions, setRegions] = useState<{ id: number; name: string }[]>([])
    const [languages, setLanguages] = useState<{ id: number; name: string }[]>([])
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setIsLoading(true)
                const response = await getRegionsAndLanguages()

                if (response.success) {
                    setRegions(response.data.regions || [])
                    setLanguages(response.data.languages || [])
                }
            } catch (error) {
                console.error("获取地区和语言数据失败:", error)
            } finally {
                setIsLoading(false)
            }
        }

        fetchData()
    }, [])

    if (isLoading) {
        return (
            <div className={className}>
                <div className="animate-pulse space-y-4">
                    <div className="flex flex-wrap gap-2">
                        {[...Array(5)].map((_, index) => (
                            <div key={index} className="h-8 w-16 bg-muted rounded-full"></div>
                        ))}
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {[...Array(5)].map((_, index) => (
                            <div key={index} className="h-8 w-16 bg-muted rounded-full"></div>
                        ))}
                    </div>
                </div>
            </div>
        )
    }

    return (
        <div className={className}>
            <div className="space-y-4">
                <CategoryFilter categories={languages} selectedId={selectedLanguageId} onChange={onLanguageChange} />
                <CategoryFilter categories={regions} selectedId={selectedRegionId} onChange={onRegionChange} />
            </div>
        </div>
    )
}

